<style scoped lang="less">
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	h3{
		// margin-left: 50px;
		margin-bottom: 20px;
		// margin-top: 20px;
	}
	.el-table{
		width: 100vh;
	}
	.fomeflex{
		// margin-left: 50px;
		display: flex;
		flex-wrap: wrap;
	}
	.vipscore{
		margin-left: 100px;
		display: flex;
		p{
			font-size: 20px;
			font-weight: 800;
			text-align: center;
		}
		div{
			margin-right: 20px;
		}
	}
	:deep(.el-table .cell){
		display: flex !important;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			// padding:0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.myform{
		margin-top: 20px;
		.characters{
			display: inline-block;
			text-align: right;
			height: 30px;
			line-height: 30px;
			width: 140px;
		}
		.record{
			display: inline-block;
			padding-left: 10px;
			height: 30px;
			line-height: 30px;
		}
	}
</style>
<template>
	<div class="common-layout">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			 <h3>会员退款</h3>
			 <div class="fomeflex">
			 	<div class="block">
			 		<el-form-item label="申请时间" label-width="90">
			 			<el-date-picker
						style="width: 210px;"
							v-model="form.createTime"
							type="date"
							placeholder="申请时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						  />
			 		</el-form-item>
			 	  </div>
			 		<el-form-item label="退款编号" label-width="90">
			 			<el-input
							v-model="form.financeCode"
			 			  style="width: 210px;height: 34px;"
			 			  placeholder="请输入退款编号"
			 			/>
			 		</el-form-item>
			 	<el-button type="primary" @click="search">搜索</el-button>
			 	<el-button plain @click="reset">重置</el-button>
			 </div>
			 <el-table :data="tableData" style="width: 100%" height="55vh">
			 	<el-table-column prop="financeCode" label="退款编号" />
			 	<el-table-column prop="finalMoney" label="退款金额" />
			 	<el-table-column prop="payMethod" label="支付类型" />
			 	<el-table-column prop="financeStatus" label="退款状态" />
			 	<el-table-column prop="createTime" label="申请时间" />
			 	<el-table-column  label="操作" width="180">
			 	    <template #default="record" style="display: flex;">
			 			<div v-if="record.row.showExam==1" style="width: 42%;">
			 				<el-button @click="examSuccess(record.row.financeId)" link type="primary" size="small" style="margin-left: 5px;">审核成功</el-button>
			 				<el-button @click="examFailed(record.row.financeId)" link type="primary" size="small" style="margin-left: 5px;">审核失败</el-button>
			 			</div>
			 			<el-button v-if="record.row.showAccount==1" @click="accounts(record.row.financeId)" link type="primary" size="small" style="margin-left: 5px;">退款</el-button>
			 	        <el-button link type="primary" @click="detailFn(record.row)" size="small" style="margin-left: 5px;">详情</el-button>
			 	    </template>
			 	</el-table-column>
			 </el-table>
			 <el-pagination
			 	layout="prev,pager,next"
			 	:page-count="total"
			 	:page-size="pageSize"
			 	v-model:current-page="pageIndex"	
			 	@current-change="changePage"
			 ></el-pagination>
		 </el-main>
	   </el-container>
	 </div>
	 <!-- 会员退款详情-->
	  <el-dialog
	     v-model="dialogFormVisible"
	     title="提现详情"
	     width="500"
	 		align-center
	   >
	    <div class="myform">
	    	<div>
	    		<span class="characters">退款编号</span>
	    		<span class="record">{{formData.financeCode}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">支付类型</span>
	    		<span class="record">{{formData.payMethod}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">申请退款金额</span>
	    		<span class="record">{{formData.examineMoney}}</span>
	    	</div>
			<div>
				<span class="characters">提现状态</span>
				<span class="record">{{formData.financeStatus}}</span>
			</div>
	    </div>
	     <template #footer>
	       <div class="dialog-footer">
	         <el-button type="primary" @click="dialogFormVisible=false">确定</el-button>
	       </div>
	     </template>
	   </el-dialog>
	   <!-- 退款 -->
	    <el-dialog
	       v-model="dialogVisible2"
	       title="退款"
	       width="500"
	 		   align-center
	     >
	       <span>是否确认退款</span>
	       <template #footer>
	         <div class="dialog-footer">
	           <el-button @click="dialogVisible2 = false">取消</el-button>
	           <el-button type="primary" @click="defineAccounts">
	             确定
	           </el-button>
	         </div>
	       </template>
	     </el-dialog>
	 		<!-- 审核失败 -->
	 		<el-dialog
	 			v-model="dialogVisible3"
	 			title="拒绝审核"
	 			width="500"
	 			align-center
	 		>
	 			<div class="myform" style="margin-bottom: 30px;">
	 				<span class="characters" style="margin-left: -30px;">拒绝理由</span>
	 				<el-input
	 					class="record"
	 					v-model="textarea"
	 					style="width: 240px;"
	 					:rows="2"
	 					type="textarea"
	 					placeholder="请输入拒绝理由"
	 				  />
	 			</div>
	 		    <template #footer>
	 		      <div class="dialog-footer">
	 		        <el-button @click="dialogVisible3 = false">取消</el-button>
	 		        <el-button type="primary" @click="defineFailed">
	 		          确定
	 		        </el-button>
	 		      </div>
	 		    </template>
	 		</el-dialog>
	 		<!-- 审核成功 -->
	 		 <el-dialog
	 		    v-model="dialogVisible4"
	 		    title="审核成功"
	 		    width="500"
	 			align-center
	 		  >
	 		    <span>是否确认通过审核</span>
	 		    <template #footer>
	 		      <div class="dialog-footer">
	 		        <el-button @click="dialogVisible4 = false">取消</el-button>
	 		        <el-button type="primary" @click="defineSuccess">
	 		          确定
	 		        </el-button>
	 		      </div>
	 		    </template>
	 		  </el-dialog>
</template>
<script setup>
import Header from '@/components/Header.vue'
import { onMounted, ref, reactive} from 'vue';
import {vipRefundList,WithdrawalAccount,WithdrawalExam} from "@/api"
import { ElMessage } from 'element-plus'

let total=ref(1);
let pageIndex=ref(1);
let pageSize=7;
let dialogFormVisible = ref(false)
let dialogVisible2 = ref(false)
let dialogVisible3 = ref(false)
let dialogVisible4 = ref(false)
const tableData = ref([])
// 列表
const viprefundList=async ()=>{
	let res=await vipRefundList({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:1
	})
	// console.log("会员退款列表",res)
	tableData.value=res.userList
	total.value=res.pageCount
	for(var i=0;i<tableData.value.length;i++){
		if(tableData.value[i].financeStatus=="待审核"){
			tableData.value[i].showExam=1
			tableData.value[i].showAccount=0
		}else if(tableData.value[i].financeStatus=="待转账"){
			tableData.value[i].showExam=0
			tableData.value[i].showAccount=1
		}else if(tableData.value[i].financeStatus=="未通过" || tableData.value[i].financeStatus=="已转账"){
			tableData.value[i].showExam=0
			tableData.value[i].showAccount=0
		}
	}
}

const vipwithddrawal=async ()=>{
		let res=await WithdrawalList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:1
		})
		// console.log("会员提现列表",res)
		tableData.value=res.userList
		for(var i=0;i<tableData.value.length;i++){
			if(tableData.value[i].financeStatus=="待审核"){
				tableData.value[i].showExam=1
				tableData.value[i].showAccount=0
			}else if(tableData.value[i].financeStatus=="待转账"){
				tableData.value[i].showExam=0
				tableData.value[i].showAccount=1
			}else if(tableData.value[i].financeStatus=="未通过" || tableData.value[i].financeStatus=="已转账"){
				tableData.value[i].showExam=0
				tableData.value[i].showAccount=0
			}
		}
		// console.log(tableData)
		total.value=res.pageCount
		withdraw.value=res.had
		withdrawin.value=res.in
	}
	
	
	var failedid;
	var successid;
	var accountsid;
	// 审核失败
	const examFailed=(item)=>{
		dialogVisible3.value=true
		failedid=item
	}
	// 确认审核失败
	const defineFailed=async()=>{
		let res=await WithdrawalExam({
			financeId:failedid,
			financeStatus:0
		})
		// console.log("审核失败结果",res)
		dialogVisible3.value=false
		if(res==null){
			ElMessage.success("审核成功")
		}
		vipwithddrawal()
	}
	
	// 审核成功
	const examSuccess=(item)=>{
		dialogVisible4.value=true
		successid=item
	}
	// 确认审核成功
	const defineSuccess=async()=>{
		let res=await WithdrawalExam({
			financeId:successid,
			financeStatus:1
		})
		// console.log("审核成功结果",res)
		dialogVisible4.value=false
		if(res==null){
			ElMessage.success("审核成功")
		}
		vipwithddrawal()
	}
	
	// 退款
	const accounts=(item)=>{
		dialogVisible2.value=true
		accountsid=item
	}
	// 确认退款
	const defineAccounts=async()=>{
		let res=await WithdrawalAccount({
			financeId:accountsid
		})
		// console.log("转账结果",res)
		dialogVisible2.value=false
		if(res==null){
			ElMessage.success("转账成功")
		}
		vipwithddrawal()
	}

	// 详情	
	let formData=reactive()
	const detailFn=(detail)=>{
		formData=detail
		// console.log("formData",formData)
		dialogFormVisible.value=true
	}
	
	// 搜索
	let form = reactive({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:1,
		createTime:"",
		financeCode:""
	})
	const search=async()=>{
		// console.log("sousuosjhuju",form)
		let res= await vipRefundList(form)
		// console.log("搜索",res)
		tableData.value=res.userList
		total.value=res.pageCount
		// console.log("form",form)
		for(var i=0;i<tableData.value.length;i++){
			if(tableData.value[i].financeStatus=="待审核"){
				tableData.value[i].showExam=1
				tableData.value[i].showAccount=0
			}else if(tableData.value[i].financeStatus=="待转账"){
				tableData.value[i].showExam=0
				tableData.value[i].showAccount=1
			}else if(tableData.value[i].financeStatus=="未通过" || tableData.value[i].financeStatus=="已转账"){
				tableData.value[i].showExam=0
				tableData.value[i].showAccount=0
			}
		}
	}
	
	// 点击分页
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		viprefundList()
	}
	
	// 重置
	const reset=()=>{
		form.financeCode=""
		form.createTime=""
		viprefundList()
	}

onMounted(()=>{
	viprefundList()
	
})
</script>
